<template>
  <div class="home container">
    <el-card shadow="hover">
      <div class="page-header">
<!--        <el-avatar :size="530" :src="userInfo.avatarUrl || logoPng" />-->
        <div class="welcome">
          <SvgIcon name="welcome" size="530px" />
        </div>
        <div class="page-header-tip">
          <p class="page-header-tip-title">
            {{ timeFix() }}{{ userInfo?.name }}，{{ welcome() }}
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { timeFix, welcome } from '@/utils/index'
import SvgIcon from '@/components/SvgIcon/src/SvgIcon.vue'
// import { getEnvByName } from '@/utils/getEnv'
// import logoPng from '@/assets/images/logo.png'
const userStore = useUserStore()
const userInfo = userStore.userInfo
</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .page-header {
    display: flex;
    align-items: center;

    .page-header-tip {
      flex: 1;
      margin-left: 40px;
    }

    .page-header-tip-title {
      margin-top: -150px;
      margin-bottom: 12px;
      font-size: 50px;
      font-weight: 700;
      color: #3c4a54;
    }

    .page-header-tip-desc {
      min-height: 20px;
      font-size: 14px;
      color: #808695;
    }
  }
  .welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>
